<template>
	<div class="cascader">
		<input type="text" class="form-control cascader-input" style="cursor: pointer" readonly="readonly"
			   placeholder="请选择" :value="inputVal" data-togger="dropdown" :data-target="id"/>
		<a @click="setDataDefault">
			<icon class="fa-times pull-right cascader-remove-icon" v-show="inputVal !== ''"></icon>
		</a>
		<drop-down :id="id" v-model="dropDownStatus" :open="dropDownStatus">
			<div class="cascader-dropdown-item animated fadeInUp" v-for="(option, key) in options" :key="key"
				 v-show="status[key] && isEmptyObj(option) !== true" :data-key="key">
				<p>{{option.label}}</p>
				<ul class="nav nav-list">
					<li v-for="data in option.data" :data-label="data.label" :data-value="data.value">
						<a @click="cascaderDropDownItemOnClick">{{data.label}}
							<icon class="fa-angle-right pull-right m-t-5" v-if="option.arrow !== false"></icon>
						</a>
					</li>
				</ul>
			</div>
		</drop-down>
	</div>
</template>

<script>
	/* eslint-disable no-undef */

    import Icon from '../Icon.vue';
    import DropDown from '../menu/DropDown.vue';
    export default {
        props: {
            options: {type: Object, required: true},
            handle: {type: Function},
            openMenuCallback: {type: Function},
            id: {type: String, required: true}
        },
        data () {
            return {
                dropDownStatus: false,
                backUp: {},
                value: {},
                status: {},
                inputVal: ''
            };
        },
        methods: {
            switchDropDownStatus () {
                this.dropDownStatus = !this.dropDownStatus;
                if (this.isEmptyObj(this.value)) {
                    this.setDefault();
                }
            },
            defaultStatus () {
                let index = 0;
                this.status = {};
                for (let key in this.options) {
                    if (index === 0) {
                        this.status[key] = (true);
                    } else {
                        this.status[key] = (false);
                    }
                    index++;
                }
            },
            cascaderDropDownItemOnClick (event) {
                let status = this.status;
                let me = $(event.srcElement);
                let li = me.parent();
                let label = li.attr('data-label');
                let val = li.attr('data-value');
                let parent = li.parent().parent();
                let defKey = parent.attr('data-key');
                let key = this.getNextKey(defKey);
                this.backUp[defKey] = {label: label, value: val};
                if (this.handle instanceof Function) {
                    this.handle(me, this.backUp[defKey], key);
                }
                $('li', parent).removeClass('active');
                li.addClass('active');
                if (key === null || this.options[defKey].arrow === false) {
                    this.value = {};
                    this.value = this.backUp;
                    this.setInputVal();
                    this.dropDownStatus = false;
                    return;
                }

                status[key] = true;
                this.status = {};
                this.status = status;
            },
            getNextKey (index) {
                let key = null;
                let b = false;
                for (let k in this.options) {
                    if (k === index) {
                        b = true;
                        continue;
                    }
                    if (b === true) {
                        key = k;
                        break;
                    }
                }
                return key;
            },
            setDefault () {
                this.value = {};
                this.defaultStatus();
                $('.cascader-dropdown-item li').removeClass('active');
                this.inputVal = '';
            },
            setInputVal () {
                let val = '';
                for (let v in this.value) {
                    for (let k in this.value[v]) {
                        if (k === 'label') {
                            val += this.value[v][k] + ' / ';
                        }
                    }
                }
                this.inputVal = val.substring(0, val.lastIndexOf(' / '));
            },
            isEmptyObj (obj) {
                return $.isEmptyObject(obj);
            },
            setDataDefault () {
                this.setDefault();
                this.dropDownStatus = false;
            }
        },
        watch: {
            status: function (newVal, oldVal) {
            },
            value: function (newVal) {
                this.$emit('input', newVal);
            },
            dropDownStatus: function (newVal) {
                if (this.openMenuCallback instanceof Function) {
                    this.openMenuCallback(newVal);
                }
            }
        },
        components: {
            Icon,
            DropDown
        },
        mounted () {
            this.defaultStatus();
        }
    };
</script>
